<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>欢迎使用校园二手交易系统</title>

    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Custom fonts for this template-->
    <link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css">
    <link
            href="https://fonts.googleapis.com/css?family=Nunito:200,200i,300,300i,400,400i,600,600i,700,700i,800,800i,900,900i"
            rel="stylesheet">

    <!-- Custom styles for this template-->
    <link href="css/sb-admin-2.min.css" rel="stylesheet">

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 引入detail样式 -->
    <link rel="stylesheet" href="css/detail.css">
</head>
<script type="text/javascript" src="../js/jquery.min.js" ></script>

<body onload="init(1)">

<div id="wrapper">

    <!-- Sidebar -->
    <ul class="navbar-nav bg-gradient-primary sidebar sidebar-dark accordion" id="accordionSidebar">

        <a class="sidebar-brand d-flex align-items-center justify-content-center" href="main.html">
            <div class="sidebar-brand-icon rotate-n-15">
                <i class="fas fa-laptop-house"></i>
            </div>
            <div class="sidebar-brand-text mx-3" style="font-size: 19px;">校园二手交易</div>
        </a>

        <hr class="sidebar-divider my-0">

        <!-- 返回 -->
        <li class="nav-item">
            <a class="nav-link" href="javascript:history.back()">
                <i style="font-size: 18px" class="fas fa-fw fa-arrow-left"></i>
                <span style="font-size: 20px; font-weight: bold">返回</span>
            </a>
        </li>

        <!-- Divider -->
        <hr class="sidebar-divider d-none d-md-block">

        <!-- Sidebar Toggler (Sidebar) -->
        <div class="text-center d-none d-md-inline">
            <button class="rounded-circle border-0" id="sidebarToggle"></button>
        </div>

    </ul>
    <!-- End of Sidebar -->

    <!-- Content Wrapper -->
    <div id="content-wrapper" class="d-flex flex-column">

        <!-- Main Content -->
        <div id="content">

            <nav class="navbar navbar-expand navbar-light bg-white topbar mb-4 static-top shadow">
                <div style="margin-left: 15px">
                    以下是该商品的详情，请按需要进行操作
                </div>
                <button id="sidebarToggleTop" class="btn btn-link d-md-none rounded-circle mr-3">
                    <i class="fa fa-bars"></i>
                </button>

                <!-- Topbar Navbar -->
                <ul class="navbar-nav ml-auto">

                    <li class="nav-item dropdown no-arrow">
                        <a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button"
                           data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                <span class="mr-2 d-none d-lg-inline text-gray-600 small">
                                        欢迎您，
                                        <input type="text" id="wecomeName" style="width: 80px; border-style: none" disabled>
                                </span>
                            <img class="img-profile rounded-circle" id="sculpture"
                                 src="img/undraw_profile.svg">
                        </a>
                        <!-- Dropdown - User Information -->
                        <div class="dropdown-menu dropdown-menu-right shadow animated--grow-in"
                             aria-labelledby="userDropdown">

                            <a class="dropdown-item" href="#" data-toggle="modal" data-target="#logoutModal">
                                <i class="fas fa-sign-out-alt fa-sm fa-fw mr-2 text-gray-400"></i>
                                退出登录
                            </a>
                        </div>
                    </li>

                </ul>

            </nav>
            <!-- 详情页内容部分start -->
            <div class="de_container w">
                <!-- 产品介绍模块开始了 -->
                <div class="product_intro clearfix">
                    <!-- 预览区域 -->
                    <div class="preview_wrap fl">
                        <img weight="260px" height="260px" src="http://192.168.32.1/white.jpg" id="photo" alt="">
                        <div class="preview_list">
                                <img weight="65px" height="65px" src="http://192.168.32.1/white.jpg" id="photoA" alt="" onclick="change(id)">
                                <img weight="65px" height="65px" src="http://192.168.32.1/white.jpg" id="photoB" alt="" onclick="change(id)">
                                <img weight="65px" height="65px" src="http://192.168.32.1/white.jpg" id="photoC" alt="" onclick="change(id)">
                                <img weight="65px" height="65px" src="http://192.168.32.1/white.jpg" id="photoD" alt="" onclick="change(id)">
                                <img weight="65px" height="65px" src="http://192.168.32.1/white.jpg" id="photoE" alt="" onclick="change(id)">
                        </div>
                    </div>
                    <!-- 产品详细信息区域 -->
                    <div class="itemInfo_wrap fl">
                        <div class="sku_name" id="title"></div>
                        <div class="summary">
                            <dl class="summary_price">
                                <dt>价格</dt>
                                <dd>
                                    <i class="price red" id="price"></i>
                                    <div id="totalComment" class="remark">累计评论0</div>
                                </dd>
                            </dl>
                            <dl class="summary_promotion">
                                <dt>地址</dt>
                                <dd id="address">
                                </dd>
                            </dl>
                            <dl class="summary_support">
                                <dt>卖家</dt>
                                <dd id="postName">
                                </dd>
                            </dl>
                            <div class="summary_support">
                                <dt>支持</dt>
                                <dd id="method"></dd>
                            </div>
                            <br>
                            <div id="optionDiv">

                            </div>

                        </div>
                    </div>
                </div>
                <!-- 产品介绍模块结束了 -->
            </div>
            <!-- 产品细节模块start -->
            <div class="product_detail clearfix w">
                <div class="detail fr" id="mod">
                </div>
            </div>
            <!-- 产品细节模块end -->
        </div>

    </div>
</div>
<!--        底部-->
<footer class="sticky-footer bg-white">
    <div class="container my-auto">
        <div class="copyright text-center my-auto">
            <span>致 力 于 打 造 最 方 便 安 全 的 校 园 二 手 交 易 服 务</span>
        </div>
    </div>
</footer>

<!-- Logout Modal-->
<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">确定要退出登录？</h5>
                <button class="close" type="button" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">×</span>
                </button>
            </div>
            <div class="modal-body">点击‘退出’后，退出系统...</div>
            <div class="modal-footer">
                <button class="btn btn-secondary" type="button" data-dismiss="modal">取消</button>
                <a class="btn btn-primary" href="login.html">退出</a>
            </div>
        </div>
    </div>
</div>

<!-- Bootstrap core JavaScript-->
<script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>

<!-- Core plugin JavaScript-->
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>

<!-- Custom scripts for all pages-->
<script src="js/sb-admin-2.min.js"></script>

<!-- Page level plugins -->
<script src="vendor/chart.js/Chart.min.js"></script>

<!-- Page level custom scripts -->
<script src="js/demo/chart-area-demo.js"></script>
<script src="js/demo/chart-pie-demo.js"></script>


</body>
<script>
    userInfo = JSON.parse(sessionStorage.getItem('userInfo'));
    if(userInfo.userName != null){
        document.getElementById('wecomeName').value = userInfo.userName; // 设置用户名
    }
    $("#sculpture").attr("src", userInfo.photo);  // 设置头像
    goodsId = sessionStorage.getItem("goodsId");
    var goodsInfo;
    var commentUtil;
    var pageNum = 1;

    function init(de) {
        if(de==1) {
            $.ajax({
                type: "GET",
                async: false,
                url: "goods/goods-server/get",
                headers: { // token
                    'Authorization': userInfo.token
                },
                dataType: "json",        //返回数据形式为json
                data: {"id": goodsId},
                success: function (result) {
                    // console.log(result);//打印服务端返回的数据(调试用)
                    if (result.status == 200) {
                        document.getElementById('title').innerHTML = result.data.title;
                        document.getElementById('address').innerHTML = result.data.address;
                        document.getElementById('postName').innerHTML = "<a href='javascript:evaluation(\""+ result.data.userId + "\")'>"+result.data.postName+"</a>";
                        document.getElementById('price').innerHTML = "￥ " + result.data.price;
                        document.getElementById('photo').src = result.data.photo;
                        document.getElementById('photoA').src = result.data.photoA;
                        document.getElementById('photoB').src = result.data.photoB;
                        document.getElementById('photoC').src = result.data.photoC;
                        document.getElementById('photoD').src = result.data.photoD;
                        document.getElementById('photoE').src = result.data.photoE;
                        var methods = result.data.method;
                        var methodStr = "";
                        if(methods.indexOf("1") != -1){
                            methodStr += "自取&ensp;&ensp;";
                        }
                        if(methods.indexOf("2") != -1){
                            methodStr+= "送货上门&ensp;&ensp;";
                        }
                        if(methods.indexOf("3") != -1){
                            methodStr+= "约定地点交货&ensp;&ensp;";
                        }
                        document.getElementById('method').innerHTML = methodStr;
                        goodsInfo = result.data;
                        if(result.data.userId != userInfo.userId){ // 自己发布的不显示操作框
                            var str =
                            "<a href='javascript:talk()' style='text-align: center; font-size: 18px' class='btn btn-success'>" +
                                "<i class='fas fa-commenting'></i>&ensp;和ta聊聊</a> &ensp;&ensp;" +
                            "<a href='javascript:buy()' style='text-align: center; font-size: 18px' class='btn btn-danger'>" +
                                "<i class='fas fa-shopping-cart'></i>&ensp;购买</a> &ensp;&ensp;" +
                            "<a href='javascript:collect()' style='text-align: center; font-size: 18px' class='btn btn-warning'>" +
                                "<i class='fas fa-star'></i>&ensp;收藏</a> &ensp;&ensp;&ensp;&ensp;" +
                            "￥<input type='text' style='width:100px' id='bidPrice'/>&ensp;" +
                            "<a href='javascript:bid()' style='text-align: center; font-size: 18px' class='btn btn-facebook'>" +
                                "<i class='fas fa-hand-sparkles'></i>&ensp;出价</a>" +
                            "<br><br>";
                            document.getElementById("optionDiv").innerHTML = str;
                        }
                        description();
                    }
                }
            });
        }
        var pageCommentParams = {
            "goodsId": goodsId,
            "pageNum": pageNum,
            "pageSize": 5,
            "orderBy" : "time desc"
        }

        $.ajax({
            type: "POST",
            async: false,
            url: "comment/comment-server/page",
            headers: { // token
                'Authorization' : userInfo.token
            },
            dataType: "json",        //返回数据形式为json
            contentType: 'application/json; charset=UTF-8',
            data: JSON.stringify(pageCommentParams),
            success: function (result) {
                if (result.status == 200) {
                    commentUtil = result.data;
                    document.getElementById("totalComment").innerHTML = "累计评论" + result.data.total;
                }
            }
        });
    }


    function insertComment() {
        // 检查账号是否被冻结
        $.ajax({
            url: 'user/user-server/checkFreeze',
            method: 'GET',
            headers: { // token
                'Authorization': userInfo.token
            },
            dataType: "json",        //返回数据形式为json
            data: {"id": userInfo.userId},
            success: function (result) {
                if (result.status != 200) {
                    alert(result.msg);
                    return;
                }
            }
        })
        var commentParams={
            userId :  userInfo.userId,
            context :  $("#context").val(),
            goodsId :  goodsInfo.id
        }
        $.ajax({
            type : "POST",
            async: false,
            url : "comment/comment-server/insert",
            headers: { // token
                'Authorization' : userInfo.token
            },
            dataType: "json",        //返回数据形式为json
            contentType: 'application/json; charset=UTF-8',
            data: JSON.stringify(commentParams),
            success : function(result) {
                if (result.status == 200) {
                    init(0);
                    comment();
                }
            }
        });
    }
    function prePage() {
        if(document.getElementById('prePage').value == 0){
            alert("当前为第一页");
            return;
        }
        init(0);
        pageNum = document.getElementById('prePage').value;
        document.getElementById("prePageButton").click();
        comment();
    }
    function nextPage() {
        if(document.getElementById('nextPage').value == 0){
            alert("当前为最后一页");
            return;
        }
        init(0);
        pageNum = document.getElementById('nextPage').value;
        document.getElementById("nextPageButton").click();
        comment();
    }
    function comment() {
        var commentList = commentUtil.list;
        var str =
            "<div class=\'detail_tab_list\'>" +
            "<div class=\'item\'>" +
            "<ul>" +
            "<li><a onclick= \'description()\'>商品介绍</a></li>" +
            "<li class=\'current\'><a onclick= 'comment()'>商品评论</a></li>" +
            "</ul>" +
            "</div>" +
            "<div class=\'detail_tab_con\'>" +
            "<div class=\'item\'>";
        for (var i = 0; i < commentList.length; i++) {
            str +=
                "<ul class=\'item_info\'>" +
                "<div class=\'comment\'>" +
                "<div class=\'comment_imgdiv\'>" +
                "<img class=\'comment_imgcss\' src=\'"+commentList[i].photo+"\'/>" +
                "</div>" +
                "<div class=\'conmment_details\'>" +
                "<div style=\'float:left;\'>" +
                "<span class=\'comment_name\'>"+commentList[i].userName+"</span>&ensp;&ensp;&ensp;&ensp;&ensp;<span>" + commentList[i].time + "</span>" +
                "</div>" +
                "<div class=\'del\'>" +
                "</div>" +
                "<div class=\'comment_content\'>"+commentList[i].context+"</div>" +
                "</div>" +
                "</div>" +
                "</ul>";
        }
        str += "</div>"+
            "<div class=\'copyright text-center my-auto\'>" +
                "<button class=\'btn-secondary\' id=\'prePageButton\' onClick=\'prePage()\'>上一页</button>" +
                "<input type=\'hidden\' id=\'prePage\' value=\'"+commentUtil.prePage+"\'/>"+
                "<input type=\'text\' value=\'"+commentUtil.pageNum+"\' id=\'pageNum\' style=\'width: 30px; border-style: none;text-align:center\' disabled/>"+
                "<button class=\'btn-secondary\' id=\'nextPageButton\' onClick=\'nextPage()\'>下一页</button>" +
                "<input type=\'hidden\' id=\'nextPage\' value=\'"+commentUtil.nextPage+"\'/>"+
            "</div>"+
            "<div class=\'input-group\'>"+
                "<input type=\'text\' name=\'context\' id=\'context\' class=\'form-control bg-light border-1 small\' placeholder=\'请输入回复信息...\' aria-label=\'earch\' aria-describedby=\'basic-addon2\'>"+
                    "<div class=\'input-group-append\'>"+
                        "<button class=\'btn btn-primary\' type=\'button\' value=\'回复\' onClick=\'insertComment()\'>"+
                            "<i class=\'fas fa-level-down-alt fa-lg fa-rotate-90 fa-fw\'></i>"+
                        "</button>"+
                    "</div>"+
            "</div></div></div>";
        document.getElementById('mod').innerHTML = str;
    }

    function description() {
        var str =
            "<div class=\'detail_tab_list\'>"  +
            "<ul>" +
            "<li class=\'current\'><a onclick= \'description()\'>商品介绍</a></li>" +
            "<li><a onclick= 'comment()'>商品评论</a></li>" +
            "</ul>" +
            "</div>" +
            "<div class=\'detail_tab_con\'>" +
            "<div class='item' style='margin-left: 100px'>" +
            goodsInfo.description +
            "<br><div style='margin-left: 100px'>" +
            "<img weight='500px' height='500px' src='"+ goodsInfo.photo +"'><br>";
            if(goodsInfo.photoA != null){
                str += "<img weight='500px' height='500px' src='"+ goodsInfo.photoA +"'><br>";
            }
            if(goodsInfo.photoB != null){
                str += "<img weight='500px' height='500px' src='"+ goodsInfo.photoB +"'><br>";
            }
            if(goodsInfo.photoC != null){
                str += "<img weight='500px' height='500px' src='"+ goodsInfo.photoC +"'><br>";
            }
            if(goodsInfo.photoD != null){
                str += "<img weight='500px' height='500px' src='"+ goodsInfo.photoD +"'><br>";
            }
            if(goodsInfo.photoE != null){
                str += "<img weight='500px' height='500px' src='"+ goodsInfo.photoE +"'><br>";
            }
            str += "</div></div></div>";
        document.getElementById('mod').innerHTML =str;
    }

    function change(id){
        var target = document.getElementById(id).src;
        document.getElementById(id).src = document.getElementById("photo").src;
        document.getElementById("photo").src = target;
    }
    function talk() {
        // 检查账号是否被冻结
        $.ajax({
            url: 'user/user-server/checkFreeze',
            method: 'GET',
            headers: { // token
                'Authorization': userInfo.token
            },
            dataType: "json",        //返回数据形式为json
            data: {"id": userInfo.userId},
            success: function (result) {
                if (result.status != 200) {
                    alert(result.msg);
                    return;
                }
            }
        })
        sessionStorage.removeItem("talkTarget");
        sessionStorage.setItem("talkTarget", goodsInfo.userId); // 跳转到聊天页面,聊天框内默认显示与发布用户的聊天内容
        window.location.href = "talk.html";
    }
    function buy() {
        // 检查账号是否被冻结
        $.ajax({
            url: 'user/user-server/checkFreeze',
            method: 'GET',
            headers: { // token
                'Authorization': userInfo.token
            },
            dataType: "json",        //返回数据形式为json
            data: {"id": userInfo.userId},
            success: function (result) {
                if (result.status != 200) {
                    alert(result.msg);
                    return;
                }
            }
        })
        var orderParams={
            sellId :  goodsInfo.userId,
            buyId : userInfo.userId,
            goodsId : goodsInfo.id,
            status : 1,
            price :  goodsInfo.price
        }
        if (confirm("您确定要购买吗?")) {
            $.ajax({
                type: "POST",
                async: false,
                url: "order/order-server/insert",
                headers: { // token
                    'Authorization' : userInfo.token
                },
                dataType: "json",        //返回数据形式为json
                contentType: 'application/json; charset=UTF-8',
                data: JSON.stringify(orderParams),
                success: function (result) {
                    if (result.status == 200) {
                        sessionStorage.removeItem("orderId");
                        sessionStorage.setItem("orderId", result.data);
                        window.location.href = 'orderDetail.html';
                    } else{
                        alert(result.msg);
                    }
                }
            });
        }
    }
    function collect() {
        var collectionParams={
            userId :  userInfo.userId,
            goodsId : goodsInfo.id
        }
        $.ajax({
            type : "PUT",
            async: false,
            url : "goods/collection-server/insert",
            headers: { // token
                'Authorization' : userInfo.token
            },
            dataType: "json",        //返回数据形式为json
            contentType: 'application/json; charset=UTF-8',
            data: JSON.stringify(collectionParams),
            success: function (result) {
                if (result.status == 200) {
                    alert("收藏成功");
                } else{
                    alert(result.msg);
                }
            }
        });
    }
    function evaluation(postId) {
        sessionStorage.removeItem("evaluationUserId");
        sessionStorage.setItem("evaluationUserId", postId);
        window.location.href = 'userEvaluation.html';
    }
    function bid(){
        var bidParms={
            goodsId : goodsInfo.id,
            userId :  userInfo.userId,
            status : 1,
            price : $("#bidPrice").val()
        }
        $.ajax({
            url: 'bid/bid-server/insert',
            method: 'POST',
            headers: { // token
                'Authorization' : userInfo.token
            },
            dataType: 'json',
            contentType : 'application/json; charset=UTF-8',
            data: JSON.stringify(bidParms),
            success: function (result) {
                console.log(result);//打印服务端返回的数据(调试用)
                if (result.status == 200) {
                    alert("出价成功");
                    window.location.href = 'bidList.html';
                }
            },
            error: function () {
                alert("异常！");
            }
        })
    }
</script>

</html>